<template>
  <div class="c-w100 c-h c-bg-white">
    <template v-if="categoryTheme == 5">
      <!-- 顶部 -->
      <div id="topCates" :class="$isWxApp() ? 'c-p-t0' : 'c-p-t68'" class="c-pf c-pz1 c-p-l0 c-w100 c-maxw640 c-pl24 c-pv30 c-bg-white top-style c-p-r0 c-m-0auto">
        <div class="c-contextX-scroll c-p" ref="topWrap">
          <div class="c-flex-row">
            <div v-for="(item, index) in leftList" :key="index" class="c-flex-column c-aligni-center c-mr36 c-flex-shrink0 top-l1-item" @click="swichMenu(index, item.catId, categoryTheme, item.name)">
              <div class="c-ww90 c-hh60 c-p">
                <CoverImg :class="index == current ? 'theme-bd2' : ''" :coverSizeClass="'c-w100 c-h c-br12 c-text-hidden'" :coverUrl="item.avatar" />
              </div>
              <!-- <img :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" alt="" :class="index == current ? 'theme-bd2' : 'c-fc-sblack'" class="c-ww90 c-hh60 c-br12"> -->
              <div class="c-ww90 c-fs18 c-mt16 c-text-ellipsis2" :class="index == current ? 'theme-fc c-fw600' : 'c-fc-sblack'">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div @click="showAllCates = true" class="c-pa c-p-t0 c-p-r0 c-p-b0 c-ww50 c-flex-column c-flex-center c-pz9 more-style">
          <div class="c-fs18 c-fc-xblack">展</div>
          <div class="c-fs18 c-fc-xblack">开</div>
          <div class="c-fs18 c-fc-xblack"><span class="iconfont c-fs20 c-fc-xblack">&#xe601;</span></div>
        </div>
      </div>
      <div v-if="showAllCates" class="c-pa c-w100 c-h c-p-t0 c-p-r0 c-p-b0 c-p-l0 c-translucent-balck50 c-pz98">
        <div :class="[showAllCates ?'picker-animate-slide-down':'', $isWxApp() ? 'c-p-t0' : 'c-p-t68']" class="c-pa c-pz6 c-p-l0 c-w100 c-maxw640 c-ph4 c-bg-white c-flex-column maxH85 c-p-r0 c-m-0auto">
          <div class="c-contexty-scroll c-w100">
            <div class="c-flex-row c-flexw-wrap c-pt30">
              <div v-for="(item, index) in leftList" :key="index" @click="showAllSwichMenu(index, item.catId, categoryTheme, item.name)" class="c-ph18 c-mb30">
                <div class="c-ww90">
                  <div class="c-ww90 c-hh60 c-p">
                    <CoverImg :class="index == current ? 'theme-bd2' : ''" :coverSizeClass="'c-w100 c-h c-br12 c-text-hidden'" :coverUrl="item.avatar" />
                  </div>
                  <!-- <img :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" alt="" :class="index == current ? 'theme-bd2' : 'c-fc-sblack'" class="c-ww90 c-hh60 c-br12"> -->
                  <div class="c-fs18 c-mt16 c-ww90 c-text-ellipsis2" :class="index == current ? 'theme-fc c-fw600' : 'c-fc-sblack'">{{item.name}}</div>
                </div>
              </div>
            </div>
          </div>
          <div @click="showAllCates = false" class="c-fs18 c-fc-xblack c-textAlign-c c-w100 c-pv20">收起<span class="c-fs20 c-fc-xblack iconfont c-ml6">&#xe604;</span></div>
        </div>
      </div>
      <template>
        <div class="c-w100 c-h c-flex-row" :class="tabCurrent == 0 ? 'c-bg-white' : 'c-bg-sgray'" :style="'padding-top:' + topHeight + 'px'">
          <!-- 左侧 -->
          <div
            class="c-ww150 c-h c-bg-sgray c-contexty-scroll c-scroll-touch menu-scroll-view"
            ref="scrollTop"
          >
            <div
              class="c-hh100 c-bg-white"
              v-for="(item, index) in rightList"
              :key="index"
            >
              <div
                class="c-h c-flex-row c-flex-center c-bg-sgray c-p menu-tab-item"
                @click.stop="handleClickLeftCt5(index, initCatId, item.catId, item.name)"
                :class="[tabCurrent==index?'active c-br-bl10 c-br-tl10':'', index == tabCurrent - 1?'c-br-br10':'', index == tabCurrent + 1?'c-br-tr10':'']"
              >
                <p
                  :class="[tabCurrent == index ? 'theme-fc c-fw500':'']"
                  class="c-fs22 c-textAlign-c c-w100 c-ph20 c-fc-sblack c-text-ellipsis2"
                >{{item.name}}</p>
              </div>
            </div>
            <div v-if="rightList && rightList.length > 0" class="c-w100 c-hh40 c-bg-white" >
              <div class="c-w100 c-h c-bg-sgray" :class="tabCurrent == rightList.length - 1 ? 'c-br-tr10' : ''"></div>
            </div>
          </div>
          <!-- 右侧 -->
          <div
            class="c-bg-white c-w0 c-flex-grow1 c-contexty-scroll c-scroll-touch c-pb30 c-pt16"
            ref="rightScrollTop"
            id="rightScrollTop"
          >
            <new-search-bar v-if="rightListArr && rightListArr.length > 0" @search="startSearch" @cancel="startSearch"></new-search-bar>
            <div class="c-flex-row c-flexw-wrap c-justify-sb c-ph28 c-mt16">
              <div class="w204 c-mb30" v-for="(item, index) in courseList" :key="index" @click="handleClickItem(item)">
                <div class="w204 h132 c-p">
                  <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" :coverUrl="item.prodAvatar" :prodType="item.prodType" />
                  <!-- <img :src="$addXossFilter(item.prodAvatar, require('@/assets/defult270.png'))" alt="" class="c-maxw c-maxh c-br16"> -->
                  <vip-status v-if="categoryConfs && categoryConfs.catVipBadge == 1" :item="item"></vip-status>
                  <div v-if="item.prodType == 7" class="c-fs16 c-fc-white c-ph8 c-pv2 c-textAlign-c c-br-tl16 c-br-br16 c-pa c-p-l0 c-p-t0" :class="item.detailInfo.enrollStatus==2 || item.detailInfo.status==2 ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.enrollStatus==2?'已结束':(item.detailInfo.status==1?'报名中':(item.detailInfo.status==0?'即将报名':(item.detailInfo.status==2?'报名截止':'已结束')))}}</div>
                  <div v-if="item.prodType == 78" class="c-fs16 c-fc-white c-ph8 c-pv2 c-textAlign-c c-br-tl16 c-br-br16 c-pa c-p-l0 c-p-t0" :class="(item.detailInfo.joinMode == 2 && item.detailInfo.status == -1) || (item.detailInfo.joinMode == 1 && item.detailInfo.termStatus==5) ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.joinMode == 2 ? (item.detailInfo.status == -1 ? '不招生/开课' : '招生中/开课中') : termStatus[item.detailInfo.termStatus]}}</div>
                  <div v-if="item.prodType == 53 && item.detailInfo.enrollCount > 0" class="c-bg-vgreen c-fs16 c-fc-white c-ph8 c-pv2 c-textAlign-c c-br-tl16 c-br-br16 c-pa c-p-l0 c-p-t0">{{item.detailInfo.enrollCount | formatNumber}}次预约</div>
                  <div v-if="item.detailInfo.isUpdating == 1 && item.prodType == 9 && enableColumnRelates == 1" class="c-bg-vgreen c-fs16 c-fc-white c-ph8 c-pv2 c-textAlign-c c-br-tl16 c-br-br16 c-pa c-p-l0 c-p-t0">更新中</div>
                </div>
                <div class="c-fs24 c-fw600 c-fc-xblack c-mt12 c-text-ellipsis1 w204">
                  <span class="c-vcAlign-middle">{{item.prodName}}</span>
                </div>
                <!-- <div class="c-fs26 c-fc-xmlred c-mt12"><span class="c-fs20" v-if="item.detailInfo && item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.price | moneyStr}}</div> -->
                <div class="c-fs26 c-fc-xmlred c-mt8">
                  <!-- 活动 -->
                  <template v-if="item.prodType == ckFrom.activity">
                    <div class="c-fs26 c-fw600" v-if="item.detailInfo.price && item.detailInfo.isShowPrice == 1 && !$isWxAppIos()">
                      <span class="c-fs26" v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1] || Number(item.detailInfo.price.split('~')[0]) !=0">
                        <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                        <span v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1]">{{item.detailInfo.price.split('~')[0]}}起</span>
                        <span v-else>{{item.detailInfo.price.split('~')[1]}}</span>
                      </span>
                      <span class="c-fs24" v-if="item.detailInfo.price.split('~')[0]==item.detailInfo.price.split('~')[1] && (Number(item.detailInfo.price.split('~')[0])==0)">免费</span>
                    </div>
                  </template>
                  <!-- 商城商品 -->
                  <template v-else-if="item.prodType == ckFrom.shopping">
                    <div class="c-fs26 c-fw600">
                      <span class="c-fs20">{{'￥' | iosPriceFilter}}</span>
                      <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                    </div>
                  </template>
                  <!-- 小班课 -->
                  <template v-else-if="item.prodType == ckFrom.privateClass">
                    <div v-if="(item.detailInfo.payType == 1 && item.detailInfo.price * 1 == 0)||item.detailInfo.payType == 4" class="c-fs24 c-fw600">{{item.detailInfo.payType == 4?"审核参与":"免费"}}</div>
                    <div v-else-if="item.detailInfo.payType == 3" class="c-fs24 c-fw600">加密</div>
                    <div v-else class="c-fs26 c-fw600"><span class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.price | moneyStr}}</div>
                  </template>
                  <!-- 资料 -->
                  <template v-else-if="item.prodType == ckFrom.datum">
                    <span class="c-fs24 c-fw600" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</span>
                    <span class="c-fs24 c-fw600" v-else-if="item.detailInfo.permission == 19">免费</span>
                    <div class="c-fs26 c-fw600" v-else>
                      <span class="c-fs24" v-if="item.detailInfo.permission == 21">加密</span>
                      <span :class="item.detailInfo.price==0?'c-fs24':'c-fs26'" v-if="item.detailInfo.permission != 21"><span class="c-fs20">{{'￥' | iosPriceFilter('Datum')}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                    </div>
                  </template>
                  <template v-else-if="item.prodType == ckFrom.camp || item.prodType == ckFrom.clockIn">
                    <span :class="item.detailInfo.payType == 2 ? 'c-fs26' : 'c-fs24'" class="c-fw600">
                      <span v-if="item.detailInfo.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                    </span>
                  </template>
                  <template v-else>
                    <span v-if="item.detailInfo.isSaleOnly == 0" class="c-fs24 c-fw600">关联售卖</span>
                    <span v-else :class="item.detailInfo.payType == 2 ? 'c-fs26' : 'c-fs24'" class="c-fw600">
                      <span v-if="item.detailInfo.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                    </span>
                  </template>
                </div>
              </div>
            </div>
            <loading-status-tem :dataStatus="dataStatus" noDataText="暂无数据"></loading-status-tem>
          </div>
        </div>
      </template>
    </template>
    <template v-else>
      <div class="c-w100 c-h c-flex-row">
        <!-- 左侧 -->
        <div
          class="c-ww150 c-h c-bg-sgray c-contexty-scroll c-scroll-touch menu-scroll-view"
          ref="scrollTop"
        >
          <div
            class="c-bg-white c-hh100"
            v-for="(item, index) in leftList"
            :key="index"
          >
            <div
              class="c-h c-flex-row c-flex-center c-bg-sgray c-p menu-tab-item"
              @click.stop="swichMenu(index, item.catId, categoryTheme, item.name)"
              :class="[current==index?'active':'', index == current - 1?'c-br-br10':'', index == current + 1?'c-br-tr10':'']"
            >
              <p
                :class="[current == index ? 'theme-fc c-fw500':'']"
                class="c-fs22 c-textAlign-c c-w100 c-ph20 c-fc-sblack c-text-ellipsis2"
              >{{item.name}}</p>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div
          class="c-bg-white c-w0 c-flex-grow1 c-contexty-scroll c-scroll-touch c-ph30 c-pb30"
          ref="rightScrollTop"
        >
          <!-- 二级模板样式一 -->
          <template v-if="categoryTheme == 1 || categoryTheme == 2">
            <div v-if="categoryTheme == 2" class="c-w100 c-mb10 c-mt30" @click="handleClickDetail(initCatId, 0, 0, name)">
              <img
                class="c-w100 c-br10"
                :src="$addXossFilter(avatar || require('@/assets/defult270.png'))"
                alt=""
              >
            </div>
            <div
              class="c-w100 c-flex-row c-flexw-wrap c-justify-sb"
              v-if="rightListArr.length > 0"
            >
              <div
                class="c-ww200 c-h c-mt30"
                v-for="(item, index) in rightListArr"
                :key="index"
                @click="handleClickDetail(initCatId, item.catId, 0, item.name)"
              >
                <div class="c-w100 c-maxh300 c-text-ellipsis1 c-br10">
                  <img
                    class="c-w100 c-maxh300 c-br10"
                    :src="$addXossFilter(item.avatar || require('@/assets/defult270.png'))"
                    alt=""
                  >
                </div>
                <div class="c-mt10 c-w100 c-flex-row c-flex-center">
                  <p class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</p>
                </div>
              </div>
            </div>
            <loading-status-tem
              v-if="categoryTheme == 1"
              :noData="rightListArr.length == 0"
              :noDataText="'暂无数据'"
            ></loading-status-tem>
          </template>
          <!-- 二级模板样式二 -->
          <template v-if="categoryTheme == 4">
            <div
              class="c-w100 c-flex-row c-flexw-wrap"
              v-if="rightListArr.length > 0"
            >
              <div
                class="c-flex-row c-flex-center c-ww205 c-hh88 c-br8 c-ph16 c-pv12 c-mt20 c-bg-sgray classifyItem1"
                v-for="(item, index) in rightListArr"
                :key="index"
                @click="handleClickDetail(initCatId, item.catId, 0, item.name)"
              >
                <p class="c-fs22 c-fc-xblack c-textAlign-c c-text-ellipsis2">{{item.name}}</p>
              </div>
            </div>
            <loading-status-tem
              :noData="rightListArr.length == 0"
              :noDataText="'暂无数据'"
            ></loading-status-tem>
          </template>
          <!-- 二级模板样式三 -->
          <template v-if="categoryTheme == 3">
            <div class="c-pt30">
              <div
                class="c-w100"
                v-for="(item, index) in rightListArr"
                :key="index"
                :class="index == rightListArr.length - 1 ?'':'c-mb40'"
              >
                <div
                  class="c-flex-row c-justify-sb c-aligni-center"
                  @click="handleClickDetail(initCatId, item.catId, 0, item.name)"
                >
                  <p class="c-fs28 c-fc-xblack c-fw500 c-text-ellipsis1 c-flex-2">{{item.name}}</p>
                  <span class="c-fs22 c-fc-gray c-flex-row c-aligni-center c-justify-end c-flex-1">更多
                    <i class="iconfont c-fc-gray c-fs20">&#xe635;</i>
                  </span>
                </div>
                <template v-for="(childItem, childIndex) in item.items">
                  <div
                    class="c-flex-row c-mt30"
                    :key="childIndex"
                    v-if="childItem.isShow == 1"
                    @click="handleClickItem(childItem)"
                  >
                    <div class="c-ww180 c-maxh270 c-text-ellipsis1 c-mr20 c-p">
                      <img
                        class="c-w100 c-maxh270 c-br10"
                        :src="$addXossFilter(!!childItem.prodAvatar ? childItem.prodAvatar : (childItem.prodType == 8 && childItem.prodAvatar == '') ? require('@/assets/i/wap/datum/datumsDefault.png') : require('@/assets/defult270.png'))"
                        alt=""
                      >
                      <vip-status v-if="categoryConfs && categoryConfs.catVipBadge == 1" :item="childItem"></vip-status>
                    </div>
                    <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb">
                      <p class="c-fs24 c-fc-xblack c-text-ellipsis2">
                        <span v-if="childItem.prodType == 7" class="c-vcAlign-middle c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10" :class="childItem.detailInfo.enrollStatus==2 || childItem.detailInfo.status==2 ? 'c-bg-b3' : 'c-bg-vgreen'">{{childItem.detailInfo.enrollStatus==2?'已结束':(childItem.detailInfo.status==1?'报名中':(childItem.detailInfo.status==0?'即将报名':(childItem.detailInfo.status==2?'报名截止':'已结束')))}}</span>
                        <span v-if="childItem.prodType == 78" class="c-vcAlign-middle c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10" :class="(childItem.detailInfo.joinMode == 2 && childItem.detailInfo.status == -1) || (childItem.detailInfo.joinMode == 1 && childItem.detailInfo.termStatus==5) ? 'c-bg-b3' : 'c-bg-vgreen'">{{childItem.detailInfo.joinMode == 2 ? (childItem.detailInfo.status == -1 ? '不招生/开课' : '招生中/开课中') : termStatus[childItem.detailInfo.termStatus]}}</span>
                        <span v-if="childItem.prodType == 53 && childItem.detailInfo.enrollCount > 0" class="c-vcAlign-middle c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10">{{childItem.detailInfo.enrollCount | formatNumber}}次预约</span>
                        <span v-if="childItem.detailInfo.isUpdating == 1 && childItem.prodType == 9 && enableColumnRelates == 1" class="c-vcAlign-middle c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10">更新中</span>
                        <span class="c-vcAlign-middle">{{childItem.prodName}}</span>
                      </p>
                      <div
                        class="theme-fc c-lh"
                        :class="!showPriceTag(childItem) ? 'c-fs24':'c-fs26'"
                      >
                        <span v-if="childItem.detailInfo.isSaleOnly == 0">关联售卖</span>
                        <span v-else>
                          <span
                            v-if="showPriceTag(childItem)"
                            class="c-fs18"
                          >{{'￥' | iosPriceFilter}}</span>{{childItem.detailInfo.payType | priceValueFilter(childItem.detailInfo.price, childItem.prodType, childItem.detailInfo.optimal, 'index')}}
                        </span>
                      </div>
                    </div>
                  </div>
                </template>
                <div
                  class="c-fs22 c-fc-gray c-mt30"
                  v-if="item.items.length == 0"
                >此分组下暂无数据</div>
              </div>
            </div>
            <loading-status-tem
              :noData="rightListArr.length == 0"
              :noDataText="'暂无数据'"
            ></loading-status-tem>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
export default {
  name: "CourseTwo",
  props: {
    categoryTheme: {
      type: Number,
      default: 1,
    },
    leftList: {
      type: Array,
      default: []
    },
    rightList: {
      type: Array,
      default: []
    },
    initCatId: {
      type: String,
      default: ''
    },
    currentIndex: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    },
    avatar: {
      type: String,
      default: ''
    },
    topList: {
      type: Array,
      default: []
    },
    initCatIdTwo: {
      type: String,
      default: ''
    },
    tabCurrentIndex: {
      type: Number,
      default: 0
    },
    categoryConfs: {
      type: Object,
      default: null
    }
  },
  components: {
    loadingStatusTem,
    newSearchBar,
    vipStatus,
    CoverImg
  },
  watch: {
    currentIndex: {
      handler(newVal) {
        this.current = newVal
      },
      immediate: true,
    },
    tabCurrentIndex: function (newVal, oldVal) {
      this.tabCurrent = newVal
    },
    rightList: function (newVal, oldVal) {
      this.rightListArr = newVal
    },
    leftList: function (newVal, oldVal) {
      if (newVal && newVal.length > 0) {
        this.$nextTick(() => {
          this.topHeight = document.querySelector("#topCates") ? document.querySelector("#topCates").offsetHeight : 0;
        })
      }
    },
  },
  computed: {
    showPriceTag() {
      return function(item) {
        return item.detailInfo.payType == 2 || (item.prodType == 7 && !(item.detailInfo.price.split('~')[0] == item.detailInfo.price.split('~')[1] && (Number(item.detailInfo.price.split('~')[0]) == 0)))
      }
    },
  },
  data() {
    return {
      rightListArr: [],
      current: 0, // 预设当前项的值
      theme: localStorage.getItem("colorName") || 'mb5_default',
      menuHeight: 0, //左边菜单的高度
      menuItemHeight: 0, //左边菜单item的高度
      topHeight: 0,
      tabCurrent: 0,
      searchText: "",
      courseList: [],
      dataStatus: 'HAS_MORE_DATA',
      showAllCates: false,
      ckFrom: global.ckFrom,
      termStatus: {
        1: '待招生',
        2: '招生中',
        3: '待开课',
        4: '开课中',
        5: '已结束',
        6: '招生中/开课中',
      },
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
    }
  },
  mounted() {
    this.rightListArr = this.rightList;
  },
  methods: {
    topScrollLevel1(index) {
      let bWidth = document.getElementById('app').clientWidth;
      let gapWidth = (bWidth / 16) * 0.9;
      let topItemWidth = document.querySelector('.top-l1-item') && document.querySelector('.top-l1-item').clientWidth ? document.querySelector('.top-l1-item').clientWidth : 0;
      this.$refs.topWrap.scrollTo({
        left: ((index - 0.5) * topItemWidth + (index - 1) * gapWidth) > 0 ? ((index - 0.5) * topItemWidth + (index - 1) * gapWidth) : 0,
        behavior: 'smooth'
      })
    },
    rightScroll() {
      let scrollTop = document.querySelector("#rightScrollTop") && document.querySelector("#rightScrollTop").scrollTop ? document.querySelector("#rightScrollTop").scrollTop : 0;
      let clientHeight = document.querySelector("#rightScrollTop") && document.querySelector("#rightScrollTop").clientHeight ? document.querySelector("#rightScrollTop") && document.querySelector("#rightScrollTop").clientHeight : 0;
      let scrollHeight = document.querySelector("#rightScrollTop") && document.querySelector("#rightScrollTop").scrollHeight ? document.querySelector("#rightScrollTop") && document.querySelector("#rightScrollTop").scrollHeight : 0;

      if ((scrollTop + clientHeight >= (scrollHeight - 5)) && (this.dataStatus == 'HAS_MORE_DATA' && this.courseList.length > 0)) {
        this.getMoreC();
      }
    },
    handleClickItem(item) {
      this.$emit('handleClickItem', item)
    },
    handleClickDetail(cateId1, cateId2, cateId3, name) {
      this.$emit('handleClickDetail', cateId1, cateId2, cateId3, name);
    },
    handleClickLeftCt5(lIndex, cateId1, cateId2, name) {
      this.$emit('handleClickLeftCt5', lIndex, cateId1, cateId2, name);
      this.$nextTick(() => {
        this.initData();
      })
    },
    swichMenu(index, catId, categoryTheme, name) {
      if (index == this.current) return;
      this.current = index;
      if (this.categoryTheme != 5) {
        this.scrollLeftView(index);
        this.$refs.rightScrollTop.scrollTo({
          top: 0,
          behavior: 'smooth'
        })
      }
      this.$emit('swichMenuTwo', index, catId, categoryTheme, name)
    },
    showAllSwichMenu(index, catId, categoryTheme, name) {
      this.swichMenu(index, catId, categoryTheme, name)
      this.$nextTick(() => {
        this.topScrollLevel1(index);
      })
      setTimeout(() => {
        this.showAllCates = false;
      }, 200);
    },
    scrollLeftView(index) {
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        this.getEleHeight('.menu-scroll-view', 'menuHeight');
        this.getEleHeight('.menu-tab-item', 'menuItemHeight');
      }
      this.$refs.scrollTop.scrollTo({
        top: index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2,
        behavior: 'smooth'
      })
    },
    getEleHeight(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = document.querySelector(elClass);
        if (!query) {
          setTimeout(() => {
            this.getEleHeight(elClass);
          }, 10);
          return;
        }
        this[dataVal] = query.clientHeight;
      })
    },
    initData() {
      pageIndex = 1;
      this.searchText = "";
      this.courseList = [];
      this.dataStatus = 'HAS_MORE_DATA';
      this.getMoreC();
    },
    showNoData() {
      pageIndex = 1;
      this.searchText = "";
      this.courseList = [];
      this.dataStatus = 'NO_DATA';
    },
    startSearch(e) {
      this.searchText = e.searchValue;
      pageIndex = 1;
      this.courseList = [];
      this.dataStatus = 'HAS_MORE_DATA';
      this.getMoreC();
    },
    //分页获取分类列表
    getMoreC() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let cUrl = `${global.apiurl}courses/v2/courseListInCategory?level1CatId=${this.initCatId}&level2CatId=${this.initCatIdTwo}&level3CatId=0&prodName=${this.searchText}&page=${pageIndex}&limit=10`
      utilJs.getMethod(cUrl, (res) => {
        let courseListTmp = [];
        if (res.list.data && res.list.data.length > 0) {
          courseListTmp = res.list.data.filter(function (cItem) {
            return cItem.isShow == 1;
          })
        }
        if (res.listType != 1) {
          if (pageIndex == 1) {
            this.courseList = courseListTmp;
            this.$nextTick(() => {
              document.querySelector("#rightScrollTop").addEventListener('scroll', this.rightScroll);
            })
          } else {
            this.courseList = [...this.courseList, ...courseListTmp];
          }
          if (!res.list.next_page_url) {
            this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        }
      });
    },
  },
}
</script>

<style lang="less" scoped>
.active {
  background: #fff;
}
.active:before {
  position: absolute;
  top: 0.95rem;
  left: 0.1rem;
  width: 0.15rem;
  height: 0.6rem;
  border-radius: 0.1rem;
  background: var(--rgbcolor);
  content: "";
}
.classifyItem:nth-child(2n + 1) {
  margin-right: 0.75rem;
}
.classifyItem1:nth-child(2n + 1) {
  margin-right: 0.5rem;
}
.top-style {
  box-shadow: 0 0.05rem 0.1rem 0 #0000000d;
  border-radius: 0 0 0.6rem 0.6rem;
}
.more-style {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0 0 0.6rem 0;
}
.w204 {
  width: 5.1rem;
}
.h132 {
  height: 3.4rem;
}
.maxH85 {
  max-height: 85%;
  border-radius: 0 0 0.6rem 0.6rem;
  box-shadow: 0 0.05rem 0.1rem 0 #0000000d;
}
.picker-animate-slide-down {
  -webkit-animation: slideDown ease 0.3s forwards;
  animation: slideDown ease 0.3s forwards;
}
@keyframes slideDown {
  from {
    -wekbit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    -wekbit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes slideDown {
  from {
    -wekbit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    -wekbit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
</style>